<!--
 * @Description: 文件描述
 * @Author: 1+
 * @Date: 2024-03-18 08:43:38
 * @LastEditors: 1+
 * @LastEditTime: 2024-08-28 15:10:33
-->
<template>
  <el-container class="container">
    <el-header height="60px">
      <Header />
    </el-header>
    <el-container style="height: calc(100vh - 60px)">
      <el-aside width="auto">
        <Aside />
      </el-aside>
      <el-main>
        <Container />
      </el-main>
      <transition>
        <el-aside v-show="configs" width="350px">
          <ChartConfig />
        </el-aside>
      </transition>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import Header from './header'
import Aside from './aside'
import Container from './container'
import ChartConfig from './chartConfig'
export default {
  components: {
    Header,
    Aside,
    Container,
    ChartConfig
  },
  computed: {
    ...mapGetters(['configs'])
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
}
.v-enter-active,
.v-leave-active {
  transition: 0.3s;
}
.v-enter,
.v-leave-to {
  width: 0 !important;
  opacity: 0;
}
</style>